<template>
  <div>
    <div class="list-left">
        <div class="responsone">
          <div class="bjimg"></div>
          <div class="cont">
            <div class="list">
              <div class="list-item">
                <div class="list-title">
                  <div class="img-left">
                    <div class="img"></div>
                  </div>
                  <div class="info-right">Vuetify MD</div>
                </div>
              </div>
               <hr/>
              <div  v-for='(item,index) in list' :key='index'>
                <router-link :to='item.ly' tag="div" class="list-item items" >
                  <div class="left-icon ">
                    <i class="icon yb-icon"><span :class="item.icon"></span></i>
                  </div>
                  <div class="right-info">
                    {{ item.info }}
                  </div>
                </router-link>
              </div>
             <div class="disable list-item">
               <div class="left-icon ">
                  <i class="icon yb-icon"></i>
                </div>
                <div class="right-info ">
                  升级到PRO
                </div>
             </div>
            </div>
          </div>
        </div>
    </div>
    <div class="taber">
      <div class="cont">
        <span>仪表盘</span>
        <div class="spacer"></div>
        <div class="taber-item">
          <div class="taber-input">
            <span>搜索...</span>
          </div>
          <a class="taber-icon iconfont icon-shouyeyibiaoban"></a>
          <a class="taber-icon iconfont icon-tongzhi"></a>
          <a class="taber-icon iconfont icon-yonghu"></a>
        </div>
      </div>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
     <div class="wx">
      <a href="javascript:;">HOME</a>
      <a href="javascript:;">CREATIVE</a>
      <a href="javascript:;">TIM</a>
      <a href="javascript:;">关于我们</a>
      <a href="javascript:;">博客</a>
      <span class="biao">©2019 Creative Tim，用  为了更好的网络</span>
    </div>
  </div>
</template>

<script>
import '../assets/font/iconfont.css'
export default {
  data () {
    return {
      list:[
        {icon:'iconfont icon-shouyeyibiaoban',info:'仪表板',ly:'/ybp'},
        {icon:'iconfont icon-yonghu',info:'用户资料',ly:'/yh'},
        {icon:'iconfont icon-biaoge',info:'表格列表',ly:'/bg'},
        {icon:'iconfont icon-yinshua',info:'活版印刷',ly:'/ys'},
        {icon:'iconfont icon-tubiao',info:'图标',ly:'/tb'},
        {icon:'iconfont icon-tubiaozhizuomoban',info:'地图',ly:'/dt'},
        {icon:'iconfont icon-tongzhi',info:'通知',ly:'/tz'},
      ]
    }
  },

  methods: {}
}
</script>

<style lang='less'  scoped>

.list-left{
  height: 100%;
  margin-top: 0px;
  transform: translateX(0px);
  width: 260px;
  position: fixed;
  z-index: 1;
  // max-height: calc(100% - 0px);
  .responsone{
    position: relative;
    overflow: hidden;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    .bjimg{
      background-image: url(https://demos.creative-tim.com/vue-material-dashboard/img/sidebar-2.32103624.jpg);
      background-position: center center;
      background-size: cover;
      z-index: -1;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .cont{
      flex: 1 0  0px;
       background: rgba(27, 27, 27, 0.74);
        padding: 0;
      .list{

        .list-item{
            transition: inherit;
            display: flex;
            margin: 10px 0;
            padding: 10px 20px;
            border-radius: 10px;
            .list-title{
                border-radius: 4px;
                height: unset;
                padding: 15px 0;
                align-items: center;
                color: inherit;
                display: flex;
                font-size: 16px;
                font-weight: 400;
                position: relative;
                text-decoration: none;
                transition: background .3s cubic-bezier(.25,.8,.5,1);
                .img-left{
                      width: 40px;
                      height: 40px;
                      margin-left: 25px;
                      margin-right: 11px;
                      min-width: unset;
                      border-radius: 50%;
                      background: white;
                      position: relative;
                      .img{
                        width: 100%;
                        height: 60%;
                        position: absolute;
                        background-image: url(http://localhost:8080/img/vuetifylogo.png);
                        background-position: center center;
                        background-size: contain;
                        background-repeat: no-repeat;
                        top: 6px;
                      }
                }
                .info-right{
                  padding: 5px 0;
                  height: unset;
                  font-size: 18px !important;
                  font-weight: 400;
                  letter-spacing: unset !important;
                  color: white;
                }
            }
        }
        .items{
          margin: 0 35px;
        }
        hr{
          border-color: rgba(180, 180, 180, 0.3);
          margin: -1px auto 24px;
          width: calc(100% - 30px);
        }
        .yb{
          margin: 0 15px;
        }
        .left-icon{
            margin-right: 15px;
            min-width: unset;
            color: white;
            i{
              width: 30px;
              color: white;
            }
        }
        .right-info{
          font-size: 14px !important;
          font-weight: 300;
          padding: 0;
          line-height: 30px;
          color: white;
        }
        .disable{
            margin-top: 559px;
            margin-bottom: 17px;
        }
      }
    }
  }
}
.taber{
    width: 100%;
    // margin-top: 0px;
    // padding-right: 0px;
    // padding-left: 0px;
    transform: translateY(0px);
    background: rgb(238, 238, 238);
    z-index: -1;
  .cont{
      height: 64px;
      margin-left: 260px;
      min-height: 70px;
      padding-bottom: 10px;
      padding-top: 10px;
      display: flex;
      padding: 0 24px;
      align-items: center;
      span{
        font-size: 18px;
        color: #A7AAAD;
        flex:2;
      }
      .spacer{
          -webkit-box-flex: 1!important;
          -ms-flex-positive: 1!important;
          flex-grow: 1!important;
      }
      .taber-item{
        flex:1;
        display: flex;
        align-items: center;
      }
      .taber-input{
        color: #A7AAAD;
        border-bottom: 1px solid #A7AAAD;
        display: flex;
        flex: 2;
        span{
          display: block;
          margin-bottom: 5px;

        }
      }
      .taber-icon{
        padding:10px 15px;
        display: flex;
        flex: 1;
      }
  }
}
.content{
  width: 100%;;
  height: 100%;;
  background: yellow;
  box-sizing: border-box;

  z-index: -1;
    transform: translateY(0px);
    background: rgb(238, 238, 238);
}
.wx{
  margin-left: 260px;
    padding: 20px 0;
    padding-top: 1px solid #E7E7E7;
    a{
      margin: 0 20px;
    }
    span{
      float: right;
      padding-right: 20px;
      color:#495057;
    }
  }
  .router-link-active{
    background: #4CAF50;
  }
</style>
